<template>
  <div class="content" v-loading="loading">
    <!--头部-->
    <div class="header-setting">
      <a-breadcrumb class="breadcrumb">
        <a-breadcrumb-item>
          <a href="../main">首页</a>
        </a-breadcrumb-item>
        <a-breadcrumb-item>运营服务</a-breadcrumb-item>
        <a-breadcrumb-item>黑名单管理</a-breadcrumb-item>
      </a-breadcrumb>
      <!--查询条件-->
      <div class="box-condition-body">
        <div class="box-condition-item">
          <div style="margin: 0 50px">添加时间</div>
          <template>
            <div class="button_time">
              <a-button
                type="primary"
                @click="button_time(0)"
                :style="computedStyle(0)"
                >今天</a-button
              >
              <a-button
                type="primary"
                @click="button_time(1)"
                :style="computedStyle(1)"
                >昨天</a-button
              >
              <a-button
                type="primary"
                @click="button_time(2)"
                :style="computedStyle(2)"
                >本周</a-button
              >
              <a-button
                type="primary"
                @click="button_time(3)"
                :style="computedStyle(3)"
                >上周</a-button
              >
              <a-button
                type="primary"
                @click="button_time(4)"
                :style="computedStyle(4)"
                >本月</a-button
              >
            </div>
          </template>
          <template>
            <div style="margin: auto 50px">
              <a-range-picker
                :showTime="{ format: 'HH:mm' }"
                format="YYYY-MM-DD HH:mm"
                :placeholder="['开始时间', '结束时间']"
                @ok="onOk"
                @change="onChange"
                :value="rangePicker()"
              />
            </div>
          </template>
        </div>
        <div class="box-condition-item">
          <div style="margin: 0 50px">车牌号</div>
          <template>
            <a-input
              style="margin: 0 100px 0 0px; width: 200px"
              v-model="inputPlate"
              placeholder="车牌号"
            />
          </template>

          <div class="select-box">
            <a-button icon="search" type="primary" @click="selecDuate"> 查询 </a-button>
            &nbsp;
            <a-button icon="sync" @click="reset"> 重置 </a-button>
          </div>
        </div>
      </div>
    </div>

    <div class="box-form">
      <!--工具栏-->
      <div class="box-tool">
        <div></div>
        <div style="display: flex">
          <a-button type="primary" @click="addClick" icon="plus">添加</a-button>
          <div style="width: 20px" />
          <template v-if="tableState.rowId != -1">
            <a-popconfirm
              title="确认删除？"
              okText="确认"
              cancelText="取消"
              @confirm="deleteClick"
              placement="leftTop"
            >
              <a-button type="danger" icon="delete">移除</a-button>
            </a-popconfirm>
          </template>
          <template v-else>
            <a-button type="danger" icon="delete" @click="deleteTip"
              >移除</a-button
            >
          </template>
        </div>
      </div>
      <!--数据表格-->
      <div class="box-table">
        <a-table
          :columns="columns"
          :dataSource="dataSource"
          :pagination="pagination"
          bordered
          size="small"
          :scroll="scroll"
          :customRow="blackcustomRow"
          :rowClassName="setRowClassName"
          @change="queryPageData"
        />
      </div>
    </div>
  </div>
</template>

<script>
import moment from "moment";
import AddPagesUtils from "../../utils/AddPagesUtils";
import Constant from "../../utils/Constant";
import BlacklistManagerApi from "../../api/operate/BlacklistManager";

const columns = [
  {
    title: "黑名单ID",
    dataIndex: "blockId",
    width: "10%",
  },
  {
    title: "车牌号",
    dataIndex: "licencePlate",
    width: "10%",
  },
  {
    title: "原因",
    dataIndex: "reason",
    width: "10%",
  },
  {
    title: "操作员",
    dataIndex: "nickName",
    width: "10%",
  },
  {
    title: "添加时间",
    dataIndex: "createdTime",
    width: "10%",
  },
];
const dataSource = [];
const queryCondition = {
  size: 10,
  page: 1,
  plate: "",
  timeScreenCondition: 6,
  startTimeStamp: "",
  endTimeStamp: "",
};
const addCondition = {
  licencePlate: "",
  reason: "",
};
const removeCondition = {
  id: "",
};

export default {
  name: "BlacklistManager",
  /*数据层*/
  data() {
    return {
      parks: [],
      selectId: -1,
      momentArr: [],
      columns: columns,
      dataSource,
      /*分页插件*/
      pagination: {
        showTotal: (total) => `共${total}条`,
        total: 0, // set get
        defaultCurrent: 1,
        showQuickJumper: true,
        defaultPageSize: 10,
      },
      /*表格固定头部*/
      scroll: {
        y: 550,
      },
      tableState: {
        rowId: -1,
      },
      /*当前选中的行数据*/
      currRowData: "",
      inputPlate: "",
      queryCondition,
      addCondition,
      removeCondition,
      loading: false,
    };
  },
  /*方法层*/
  methods: {
    /*时间按钮控制*/
    button_time(e) {
      this.selectId = e;
      let momentStart;
      let momentEnd;
      switch (e) {
        case 0:
          momentStart = moment().startOf("day");
          momentEnd = moment().endOf("day");
          break;
        case 1:
          momentStart = moment().add("day", -1).startOf("day");
          momentEnd = moment().add("day", -1).endOf("day");
          break;
        case 2:
          momentStart = moment().week(moment().week()).startOf("week");
          momentEnd = moment().week(moment().week()).endOf("week");
          break;

        case 3:
          momentStart = moment()
            .week(moment().week() - 1)
            .startOf("week");
          momentEnd = moment()
            .week(moment().week() - 1)
            .endOf("week");
          break;
        case 4:
          momentStart = moment().month(moment().month()).startOf("month");
          momentEnd = moment().month(moment().month()).endOf("month");
          break;
        default:
          break;
      }
      this.momentArr[0] = momentStart;
      this.momentArr[1] = momentEnd;
      this.queryData();
    },
    /*日期选择*/
    onChange(date) {
      this.selectId = -1;
      this.momentArr = date;
    },
    onOk() {
      this.selectId = -1;
      this.queryData();
    },
    rangePicker() {
      return this.momentArr;
    },

    /*表格*/
    blackcustomRow(record) {
      return {
        on: {
          // 事件
          click: () => {
            this.currRowData = record;
            this.tableState.rowId = record.blockId;
          },
        },
      };
    },
    setRowClassName(record) {
      return record.blockId === this.tableState.rowId ? "clickRowStyl" : "";
    },

    addClick() {
      AddPagesUtils.showAddPages(
        Constant.viewType.BLACKLIST_ADD,
        null,
        this.confirmAdd
      );
    },
    deleteClick() {
      let currRowData = this.currRowData;
      if (currRowData == undefined || currRowData == "") {
        this.$message.warn("给你选择要删除的数据！");
      } else {
        let removeCondition1 = this.removeCondition;
        removeCondition1.id = currRowData.blockId;
        BlacklistManagerApi.removeBlock(removeCondition1)
          .then(() => {
            this.$message.success("删除成功！");
            this.queryData();
          })
          .catch((error) => {
            console.log("删除黑名单异常！", error);
          });
      }
    },
    confirmAdd(data) {
      if (data == undefined) {
        return;
      }
      let addCondition1 = this.addCondition;
      addCondition1.licencePlate = data.inputPlate;
      addCondition1.reason = data.inputReson;
      BlacklistManagerApi.addBlock(addCondition1)
        .then(() => {
          this.queryData();
        })
        .catch((error) => {
          console.log("添加黑名单异常！", error);
        });
    },

    /*查询数据*/
    queryPageData(page) {
      this.queryData(page.current);
    },

    queryData(pageNum) {
      this.loading = true;
      /* 清空 */
      this.tableState.rowId = -1;

      /* param */
      let queryCondition1 = this.queryCondition;
      let beginMoment = this.momentArr[0];
      let endMoment = this.momentArr[1];
      if (beginMoment != undefined && endMoment != undefined) {
        queryCondition1.startTimeStamp = new Date(beginMoment).getTime() / 1000;
        queryCondition1.endTimeStamp = new Date(endMoment).getTime() / 1000;
        queryCondition1.timeScreenCondition = 6;
      } else {
        queryCondition1.timeScreenCondition = 0;
      }
      queryCondition1.plate = this.inputPlate;
      queryCondition1.page = pageNum || 1;

      BlacklistManagerApi.getList(queryCondition1)
        .then((data) => {
          this.dataSource = data.data.list;
          this.pagination.total = data.data.total;
          this.loading = false;
        })
        .catch((error) => {
          console.log("获取黑名单列表异常！", error);
          this.loading = false;
        });
    },

    deleteTip() {
      this.$message.info("请先选择要删除数据");
    },

    selecDuate() {
      this.queryData();
    },
    reset() {
      this.inputPlate = "";
      this.button_time(0);
      this.queryData();
    },
  },
  /*计算层*/
  computed: {
    computedStyle() {
      return function (selectId) {
        return this.selectId == selectId ? "" : "";
      };
    },
  },
  /*渲染层*/
  mounted() {
    this.button_time(0);
    // this.queryData();
  },
};
</script>

<style>
/*表格行选中背景颜色*/
.clickRowStyl {
  background-color: #c1e0fd;
}

.content {
  width: 100%;
  height: 100%;
}

.header-setting {
  width: 100%;
  height: 174px;
  background: #fff;
}

.header-setting .breadcrumb {
  margin-left: 41px;
  padding-top: 15px;
}

.box-condition-item {
  display: flex;
  align-items: center;
  min-width: 1500px;
  margin-top: 5px;
  margin-bottom: 5px;
  padding: 5px 0;
}

.box-condition-item .box-item {
  display: flex;
  align-items: center;
  justify-content: center;
  margin: 5px 5px 20px 5px;
}

.button_time button {
  margin-left: 10px;
}

/* 表单 */
.box-form {
  padding-left: 40px;
  padding-right: 40px;
  min-height: 705px;
  background: #fff;
  margin-top: 8px;
}

.box-form .box-tool {
  padding-top: 11px;
  margin: 8px 0;
  width: 100%;
  /* flex */
  display: flex;
  align-items: center;
  justify-content: space-between;
}
</style>
